<template>
  <div id="body" class="recuitIndex">
    <div id="container">
      <div id="sidebar">
        <div class="mainNavs">
          <div class="menu_box" v-for="(item,index) in industry" :key="index">
            <div class="menu_main">
              <h2>
                {{item.industry_title}}
                <span></span>
              </h2>
            </div>
            <div class="menu_sub dn">
              <dl class="reset">
                <dd>
                  <a
                    v-for="(per,num) in item.position"
                    :key="num"
                    href="javascript:void(0)"
                    @click="toWhere('positionMain',{position_id:per.position_id})"
                  >{{per.position_title}}</a>
                </dd>
              </dl>
            </div>
          </div>
        </div>
        <a class="subscribe" href="javascript:void(0)" @click="toWhere('positionMain')">更多职位</a>
      </div>
      <div class="content">
        <div id="search_box">
          <form id="searchForm" name="searchForm">
            <ul id="searchType">
              <li data-searchtype="1" class="type_selected">职位</li>
            </ul>
            <!-- <div class="searchtype_arrow"></div> -->
            <input
              type="text"
              id="search_input"
              name="kd"
              tabindex="1"
              value
              placeholder="请输入职位名称，如：产品经理"
              @input="listenInput"
            />
            <input
              id="search_button"
              value="搜索"
              @click="toWhere('positionMain',{keyword:formItem.keyword})"
            />
          </form>
        </div>
        <dl class="hotSearch">
          <dt>热门搜索：</dt>
          <dd v-for="(item,index) in pcConfig.hotSearch" :key="index">
            <a href="javascript:void(0)" @click="toWhere('positionMain',{keyword:item})">{{item}}</a>
          </dd>
          <dd v-if="!pcConfig.hotSearch || pcConfig.hotSearch.length == 0">
            <a href="javascript:void(0)" @click="toWhere('positionMain',{keyword:'产品经理'})">产品经理</a>
          </dd>
        </dl>
        <div id="home_banner" v-if="pcConfig.bannerList">
          <el-carousel indicator-position="outside" height="160px">
            <el-carousel-item v-for="(item,index) in pcConfig.bannerList" :key="index">
              <img :src="item.image_url" @click="bannerTo(item.type,item.number)" />
            </el-carousel-item>
          </el-carousel>
        </div>

        <ul class="reset hotabbing">
          <li :class="formItem.order == 'default' && 'current'" @click="getJobList('default')">热门职位</li>
          <li :class="formItem.order == 'new' && 'current'" @click="getJobList('new')">最新职位</li>
        </ul>
        <div id="hotList">
          <PositionList :jobList="hotJobList"></PositionList>
          <PositionList :jobList="newJobList"></PositionList>

        </div>

        <div class="clear"></div>
        <div id="linkbox" v-if="pcConfig.friendList">
          <dl>
            <dt>友情链接</dt>
            <dd v-for="(item,index) in pcConfig.friendList" :key="index">
              <a href="javascript:void(0)" @click="locationHref(item.url)">{{item.name}}</a>
              <span v-if="index < pcConfig.friendList.length - 1">|</span>
            </dd>
          </dl>
        </div>
      </div>
    </div>
    <!-- end #container -->
  </div>
  <!-- end #body -->
</template>

<script>
import { Industry } from "~/api/allRequest";
import { JobList } from "~/api/worker/job.js";
import { getSalaryUnit, getJobTag } from "~/common/js/util.js";
import { transDate } from "~/public/js/public";
import Empty from "~/components/empty/empty";
import PositionList from "~/components/positionList/positionList"
export default {
  name: "index",
  data() {
    return {
      formItem: {
        latitude: "",
        longitude: "",
        order: "",
        position_id: "",
        area_id: "",
        keyword: "",
        worker_demand_id: "",
        page: "1"
      },
      salary_unit: ["", "元/月", "元/日", "元/时"],
      educationArr: [
        "学历不限",
        "小学",
        "初中",
        "中专",
        "高中",
        "大学专科",
        "大学本科",
        "硕士",
        "博士",
        "博士后",
        "其它"
      ],
      pcConfig: JSON.parse(localStorage.getItem("pcConfig")) || {},
      hotJobList: [],
      newJobList: [],
      industry: []
    };
  },
  components: { Empty,PositionList  },
  beforeCreate() {},
  created() {
    this.$store.dispatch("changeTabName", "recuitIndex");
    this.getIndustryList();
  },
  beforeMount() {},
  mounted() {
    this.getJobList();
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroy() {},
  methods: {
    listenInput(e) {
      this.formItem.keyword = e.currentTarget.value;
    },
    jobTag(index) {
      return getJobTag(index);
    },
    getIndustryList() {
      if (localStorage.getItem("industry")) {
        this.industry = JSON.parse(localStorage.getItem("industry"));
      } else {
        Industry()
          .then(result => {
            this.industry = result;
            localStorage.setItem("industry", JSON.stringify(result));
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    getJobList(order = "default") {
      this.formItem.order = order;
      JobList(this.formItem)
        .then(result => {
          let { data } = result;
          for (let i = 0; i < data.length; i++) {
            data[i].time_update = transDate(data[i].time_update);
          }
          if (order == "default") {
            this.hotJobList = data;
          } else if (order == "new") {
            this.newJobList = data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    toWhere(name, json) {
      if (json) {
        this.$router.push({ name, query: json });
      } else {
        this.$router.push({ name });
      }
    },
    locationHref(url) {
      window.location.href = url;
    },
    bannerTo(type, number) {
      switch (type) {
        case "companyDetail":
          this.$router.push({name:type,query:{ company_id: number }});
          break;
        case "positionDetail":
          this.$router.push({name:type,query:{ position_id: number }});
          break;
        case "default":
          break;
        default:
          this.$router.push({name:type})
          break;
      }
    }
  }
};
</script>

<style scoped lang="less">
@import "./../../../public/less/main.less";

.recuitIndex {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  // background: white;
  #container {
    display: flex;
  }
  .swiperAdvertize {
    width: 60%;
    height: 100vh;
    .el-carousel__item {
      .imageBlock {
        width: 100%;
        height: 100%;
        .img {
          width: 100%;
        }
      }
    }
    .el-carousel__item h3 {
      color: #475669;
      font-size: 18px;
      opacity: 0.75;
      line-height: 300px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
  }
}
.ui-autocomplete {
  width: 488px;
  background: #fafafa !important;
  position: relative;
  z-index: 10;
  border: 2px solid #91cebe;
}

.ui-autocomplete-category {
  font-size: 16px;
  color: #999;
  width: 50px;
  position: absolute;
  z-index: 11;
  right: 0px;
  /*top: 6px; */
  text-align: center;
  border-top: 1px dashed #e5e5e5;
  padding: 5px 0;
}

.ui-menu-item {
  *width: 439px;
  vertical-align: middle;
  position: relative;
  margin: 0px;
  margin-right: 50px !important;
  background: #fff;
  border-right: 1px dashed #ededed;
}

.ui-menu-item a {
  display: block;
  overflow: hidden;
}

.menu_main:hover + .menu_sub {
  display: block;
}
.menu_sub:hover {
  display: block;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 160px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

#search_button{
  text-align: center;
}
</style>
